<template>
	<view class="container">
		<view class="shibie-text">
			<text class="shibie-text-title">您说的内容</text>
			<text class="shibie-text-text">{{currentText}}</text>
		</view>
		<view class="shibie-text">
			<text class="shibie-text-title" style="border-bottom: 10rpx solid #1bbbb0;">查询的站点</text>
			<text class="shibie-text-text">{{requestSite}}</text>
		</view>
		<view class="yuyin">
			<text v-if="isShow">请讲话...</text>
			<view :class="isShow ? 'show-turn-record' : 'hide-turn-record'">
				<canvas id="turnrecord" type="2d" style="display: inline-block;width: 550px;height: 550px;" />
			</view>
			<view class="show-ai">
				<canvas id="ai" type="2d" style="display: inline-block;width: 150px;height: 150px;" @touchstart="recordStart"
					@touchend="recordEnd" />
			</view>
		</view>
	</view>
</template>

<script>
	import lottie from '../utils/lottie/lottie-miniprogram.js';
	import {
		getSite
	} from '../api/system/user.js';
	var plugin = requirePlugin("WechatSI");
	let manager = plugin.getRecordRecognitionManager();
	export default {
		data() {
			return {
				ai_lottie_inited: false,
				turnrecord_lottie_inited: false,
				currentText: '暂无内容',
				requestSite: '暂无内容',
				isShow: false
			}
		},
		onLoad() {
			this.aiLottieInit()
			this.turnrecordLottieInit()
			this.initRecord()
		},
		methods: {
			initRecord() {
				//有新的识别内容返回，则会调用此事件
				manager.onRecognize = (res) => {
					console.log('有新的识别内容返回 => ', res)
					let text = res.result
					this.currentText = text
				}
				// 识别结束事件
				manager.onStop = (res) => {
					console.log('语音识别结束 => ', res);
					let text = res.result
					if (text == '') {
						return
					}
					this.currentText = text.substring(0, text.length - 1)
					this.getSiteByName()
				}
			},
			aiLottieInit() {
				if (this.ai_lottie_inited) {
					return
				}
				uni.createSelectorQuery().selectAll('#ai').node(res => {
					const canvas = res[0].node
					const context = canvas.getContext('2d')

					canvas.width = 150
					canvas.height = 150

					lottie.setup(canvas)
					const ani = lottie.loadAnimation({
						loop: true,
						autoplay: true,
						animationData: require('../utils/lottie/ai.js'),
						rendererSettings: {
							context,
						},
					})
					ani.play()
					this.ai_lottie_inited = true
				}).exec()
			},
			turnrecordLottieInit() {
				if (this.turnrecord_lottie_inited) {
					return
				}
				uni.createSelectorQuery().selectAll('#turnrecord').node(res => {
					const canvas = res[0].node
					const context = canvas.getContext('2d')

					canvas.width = 550
					canvas.height = 550

					lottie.setup(canvas)
					const ani = lottie.loadAnimation({
						loop: true,
						autoplay: true,
						animationData: require('../utils/lottie/turnrecord.js'),
						rendererSettings: {
							context,
						},
					})
					ani.play()
					this.turnrecord_lottie_inited = true
				}).exec()
			},
			recordStart() {
				console.log('开启长按')
				uni.vibrateShort({
					type: 'heavy',
					complete: res => {
						console.log('设置震动 => ', res)
					}
				})
				this.isShow = true
				this.requestSite = '暂无内容'
				manager.start({
					lang: 'zh_CN',
				})
			},
			recordEnd() {
				console.log('结束长按')
				this.isShow = false
				manager.stop()
			},
			getSiteByName(text) {
				let data = {
					communityName: this.currentText
				}
				getSite(data).then(res => {
					console.log('查询结果 => ', res)
					if (res.code === 200) {
						this.requestSite = res.data.siteName + '-' + res.data.areaName
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
	}

	.yuyin {
		width: 100%;
		height: auto;
		display: flex;
		position: fixed;
		bottom: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		align-items: center;
		justify-content: center;
	}

	.yuyin text {
		position: absolute;
		margin-bottom: 250rpx;
		color: #787878;
		font-weight: bold;
	}

	.shibie-text {
		width: 95%;
		height: auto;
		background-color: #fffff;
		box-shadow: 0rpx 4rpx 6rpx rgba(0, 0, 0, 0.15);
		border-radius: 20rpx;
		margin: 150rpx auto;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 50rpx;
	}

	.shibie-text-title {
		color: black;
		border-bottom: 10rpx solid #fc766a;
		width: 200rpx;
		font-size: 38rpx;
	}

	.shibie-text-text {
		width: 95%;
		height: auto;
		background-color: #e1e1e1;
		margin: auto;
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 40rpx;
	}

	.show-turn-record {
		width: 550px;
		height: 550px;
		position: absolute;
	}

	.hide-turn-record {
		width: 0px;
		height: 0px;
		overflow: hidden;
	}

	.show-ai {
		width: 150px;
		height: 150px;
		position: absolute;
	}
</style>